<template>
  <div>
    <div>
      {{ userAgent }}
    </div>
    <section v-for="(item,index) in group_list" :key="item.id+index">
      <h2 class="dim-heading">{{ item.name }}</h2>
      <dee-preview-model
        :field-temp="item.items"
        :relation-dict="relationDict"
        :relation-keys="relationKeys"
        :relation-ids="relationIds"
        :calculation-dict="calculationDict"
        :calculation-keys="calculationKeys"
        :constants-dict="constantsDict"
        :real-time="realTime"
        :dim-data="dimData"
        :meta-template="metaTemplate"
        :show-log="true"
        :is-editing="true"
        custom-question-id="q"
        @modify="modifyHandle"
        @change-id="changeRelationIdHandle"
      />
      <!-- <DeeModel
        :field-temp="item.items"
        :relation-dict="relationDict"
        :relation-keys="relationKeys"
        :relation-ids="relationIds"
        :real-time="realTime"
        :dim-data="dimData"
        :show-log="true"
        :is-editing="true"
        custom-question-id="q"
        @modify="modifyHandle"
        @change-id="changeRelationIdHandle"
      /> -->
    </section>
  </div>
</template>
<script>
// import FieldTemp from './乳腺癌字段修订（早&晚）0717.json'
// import FieldTemp from './全部题型.json'
import FieldTemp from './计算赋值题.json'
import DeeModel from './dee-model'
export default {
  components: {
    DeeModel
  },
  data() {
    return {
      previewVisible: false,
      group_list: [],
      dimData: {},
      relationDict: {},
      relationKeys: {},
      userAgent: '',
      relationIds: [],
      realTime: false,
      injectData: {},
      metaTemplate: {}
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      const {
        group_list,
        relation_dict,
        relation_keys,
        calculation_dict,
        calculation_keys,
        constants_dict
      } = FieldTemp
      this.metaTemplate = FieldTemp
      this.previewVisible = true
      this.group_list = group_list
      this.$set(this.injectData, 'group_list', group_list)
      // this.group_list = group_list.filter(v => v.name === '首次进展事件')
      this.relationDict = relation_dict
      this.relationKeys = relation_keys
      this.calculationDict = calculation_dict
      this.calculationKeys = calculation_keys
      this.constantsDict = constants_dict
      setTimeout(() => {
        this.dimData = {
          diag_bronchitis: 2,
          pat_name: '江夏',
          pat_work: '程序汪',
          pat_sex: 2,
          hnow_first: '没有哦',
          symptom_thin: 2,
          diag_intestinal_polyposis: 1,
          diag_fap: 2,
          diag_ibd: 3,
          // diag_lung_cancer: 1,
          diag_nasopharyngeal_cancer: 3,
          dp_cc_tumor_location: 3,
          sleep_snore: 2,
          sleep_snore_voice: 3,
          sleep_symptom_1: '',
          sleep_symptom_2: 2,
          sleep_symptom_3: '',
          sleep_symptom_4: '',
          sleep_symptom_5: 5,
          treat_diet_rw: 1,
          diag_cancer_text: '其他输入框',
          'first#complaint': '恢复',
          'enzymology_ast#one': 1,
          'follow_first#follow_h_abd_pain': 2,
          'follow_second#follow_h_abd_pain': 2,
          'follow_third#follow_h_abd_pain': 2,
          // // 'enzymology_ast_dropdown#total#total': 1,
          'enzymology_ast_dropdown#total#total': 2,
          'enzymology_alt_dropdown#total#total': 4,
          'enzymology_alt_dropdown#level#level': 4,
          'enzymology_ggt_dropdown#attitude#attitude': 4,
          symptom_bhchange: 5,
          // 矩阵下拉多选
          'follow_first_dropdown#sym#follow_h_diarrhea_dropdown': 4,
          'follow_first_dropdown#sym#follow_h_nausea_dropdown': 5,
          'follow_second_dropdown#exam#exam_ct': 2,
          'follow_second_dropdown#exam#exam_us': 4,
          'follow_third_dropdown#lis#lis_2': 3,
          'follow_third_dropdown#lis#lis_3': 4,

          // 复合矩阵
          'tumor1#size': '很小',
          'tumor2#size': '很大',
          'tumor1#tumor_main_path_type#tumor_main_path_type1': 1,
          'tumor1#tumor_main_path_type#tumor_main_path_type2': 2,
          'tumor1#tumor_main_path_type#tumor_main_path_type3': 3,
          'tumor2#tumor_main_path_type#tumor_main_path_type4': 4,
          'tumor2#tumor_main_path_type#tumor_main_path_type5': 5,
          'tumor1#texture#texture_1': 2,
          'tumor2#texture#texture_1': 1,
          // 自增型复合矩阵
          'matrix_complex_list_chem': [
            {
              chem_med1: '',
              chem_med2: 2,
              chem_med3: 3,
              chem_med4: '',
              chem_med5: '',
              chem_med6: '',
              chem_plan: 2,
              over_date: '2021-03-16'
            },
            {
              begin_date: '2021-03-20',
              chem_med1: '',
              chem_med2: '',
              chem_med3: '',
              chem_med4: 4,
              chem_med5: '',
              chem_med6: 6,
              chem_plan: 3,
              over_date: '2021-03-27'
            }
          ],

          // 统一组件化
          h_hypertension: 1
        }
        this.relationIds = this.$questionUtils.findRelationIds({
          group_list,
          relation_dict,
          relation_keys,
          dimData: this.dimData
        })
      }, 1000)
    },
    // 总数据修改回调
    modifyHandle(data) {
      const obj = { ...this.dimData }
      for (const k in data.value) {
        obj[k] = data.value[k]
      }
      this.dimData = obj
      // console.clear()
      console.log(data)
      // console.warn('===============')
      // console.log(this.dimData)
      // console.warn('===============')
    },
    // 控制关联题显示隐藏事件回调
    changeRelationIdHandle(data) {
      const { id, name, type, qName } = data
      console.log(id, type, qName)
      const relationIds = [...this.relationIds]
      if (type === 'add' && !relationIds.includes(id)) {
        relationIds.push(id)
        this.relationIds = relationIds
      } else if (type === 'remove' && relationIds.includes(id)) {
        relationIds.splice(relationIds.indexOf(id), 1)
        this.relationIds = relationIds
        this.$alert(`由于 [${qName}] 的答案改变， [${name}] 将会被隐藏`, '提示', {
          confirmButtonText: '确认',
          showCancelButton: false,
          showClose: false,
          callback: action => {
          }
        })
        // 是实时交互的话，就清空
        if (this.realTime) {
          this.clearDimData(id)
        }
      }
      // console.log(relationIds, '==============')
    },
    // 清空dimData 触发事件和后台交互
    clearDimData(id) {
      let fieldTemp = []
      this.group_list.forEach(v => {
        v.items.forEach(v2 => {
          fieldTemp.push(v2)
        })
      })
      fieldTemp = fieldTemp.filter(v => v.exist_relation_items && v.id === id)
      const itemData = fieldTemp[0]
      const { type, matrix_rows, matrix_cols } = itemData
      const clearObj = { type }
      if (['long_text', 'short_text'].includes(type)) {
        clearObj.value = { [itemData.en_name]: '' }
      } else if (['multiple_choice', 'multiple_dropdown', 'single_choice', 'single_dropdown'].includes(type)) {
        const obj = {}
        itemData.options.forEach(v => { obj[v.option_en_name] = '' })
        clearObj.value = obj
      } else if (['matrix_multiple_choice', 'matrix_input', 'matrix_single_choice'].includes(type)) {
        const obj = {}
        matrix_rows.forEach(row => {
          matrix_cols.forEach(col => {
            obj[row.en_name + '#' + col.en_name] = ''
          })
        })
        clearObj.value = obj
      }
      this.modifyHandle(clearObj)
    },
    // 找关联题的name
    getName(id) {
      let name = ''
      for (const item of this.group_list) {
        name = item.items.find((item2) => item2.id === id)?.name
      }
      return name
    }
  }
}
</script>
<style lang="scss">
@import "~@/styles/scss/_mixins";
.dim-heading{
    margin-top: 1rem;
    font-weight: 600;
    font-size: 17px;
    color: $main-color;
    margin-left: 0.5rem;
  }
</style>
